<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Game</title>
	<script src="js/JQuery.min.js"></script>
	<style>
		input{
			font-size:26px;
			margin-top: 20px;
		}
		body{
			background-color: black;
		}
		#player{
			position: absolute;
			left:10px;
			top:100px
		}
	</style>
</head>
<body>
<img id="player" src="img/player_right.gif"/>

<script>
	$(document).ready(function() {
		var player = $('#player');
		var isRunning = false;


		// 添加双击事件，控制角色变身
		player.on('dblclick', function() {
			if (!isRunning) {
				// 切换角色图片为变身后的图片
				if (player.attr('src') === 'img/player_right.gif') {
					player.attr('src', 'img/playerbig_right.gif');
				} else if(player.attr('src') === 'img/player_left.gif'){
					player.attr('src', 'img/playerbig_left.gif');
				}else{
					player.attr('src', 'img/player_right.gif');
				}
			}
		});

		// 添加键盘事件，控制角色移动
		$(document).on('keydown', function(event) {
			if (!isRunning) {
				switch(event.which) {
					case 38: // 上箭头键
						if(player.attr('src') === 'img/player_right.gif'){
							// 设置角色图片为向上跑动状态的图片
							player.attr('src', 'img/player_run_right.gif');
						}else if(player.attr('src') === 'img/player_left.gif'){
							// 设置角色图片为向上跑动状态的图片
							player.attr('src', 'img/player_run_left.gif');
						}else if(player.attr('src') === 'img/playerbig_right.gif'){
							// 设置角色图片为向上跑动状态的图片
							player.attr('src', 'img/playerbig_right.gif');
						}else if(player.attr('src') === 'img/playerbig_left.gif'){
							// 设置角色图片为向上跑动状态的图片
							player.attr('src', 'img/playerbig_left.gif');
						}

						// 执行跑动动作
						player.animate({top: '-=100px'}, 1000, function() {
							if(player.attr('src') === 'img/player_run_right.gif'){
								// 跑动动作完成后，设置角色图片为静止状态的图片
								player.attr('src', 'img/player_right.gif');
							}else if(player.attr('src') === 'img/player_run_left.gif'){
								// 跑动动作完成后，设置角色图片为静止状态的图片
								player.attr('src', 'img/player_left.gif');
							}
							isRunning = false;
						});

						isRunning = true;
						break;
					case 40: // 下箭头键
						if(player.attr('src') === 'img/player_right.gif'){
							// 设置角色图片为向下跑动状态的图片
							player.attr('src', 'img/player_run_right.gif');
						}else if(player.attr('src') === 'img/player_left.gif'){
							// 设置角色图片为向下跑动状态的图片
							player.attr('src', 'img/player_run_left.gif');
						}else if(player.attr('src') === 'img/playerbig_right.gif'){
							// 设置角色图片为向下跑动状态的图片
							player.attr('src', 'img/playerbig_right.gif');
						}else if(player.attr('src') === 'img/playerbig_left.gif'){
							// 设置角色图片为向下跑动状态的图片
							player.attr('src', 'img/playerbig_left.gif');
						}
						// 执行跑动动作
						player.animate({top: '+=100px'}, 1000, function() {
							if(player.attr('src') === 'img/player_run_right.gif'){
								// 跑动动作完成后，设置角色图片为静止状态的图片
								player.attr('src', 'img/player_left.gif');
							}else if(player.attr('src') === 'img/player_run_left.gif'){
								// 跑动动作完成后，设置角色图片为静止状态的图片
								player.attr('src', 'img/player_left.gif');
							}
							isRunning = false;
						});

						isRunning = true;
						break;
					case 37: // 左箭头键
						if(player.attr('src') === 'img/player_right.gif' || player.attr('src') === 'img/player_left.gif'){
							// 设置角色图片为向左跑动状态的图片
							player.attr('src', 'img/player_run_left.gif');
						}else if(player.attr('src') === 'img/playerbig_left.gif' || player.attr('src') === 'img/playerbig_right.gif'){
							// 设置角色图片为向左跑动状态的图片
							player.attr('src', 'img/playerbig_left.gif');
						}
						// 执行跑动动作
						player.animate({left: '-=100px'}, 1000, function() {
							if(player.attr('src') === 'img/player_run_right.gif' || player.attr('src') === 'img/player_run_left.gif'){
								// 跑动动作完成后，设置角色图片为静止状态的图片
								player.attr('src', 'img/player_left.gif');
							}else if(player.attr('src') === 'img/playerbig_left.gif' || player.attr('src') === 'img/playerbig_right.gif'){
								// 跑动动作完成后，设置角色图片为静止状态的图片
								player.attr('src', 'img/playerbig_left.gif');
							}
							isRunning = false;
						});

						isRunning = true;
						break;
					case 39: // 右箭头键
						if(player.attr('src') === 'img/player_right.gif' || player.attr('src') === 'img/player_left.gif'){
							// 设置角色图片为向右跑动状态的图片
							player.attr('src', 'img/player_run_right.gif');
						}else if(player.attr('src') === 'img/playerbig_left.gif' || player.attr('src') === 'img/playerbig_right.gif'){
							// 设置角色图片为向右跑动状态的图片
							player.attr('src', 'img/playerbig_right.gif');
						}
						// 执行跑动动作
						player.animate({left: '+=100px'}, 1000, function() {
							if(player.attr('src') === 'img/player_run_right.gif' || player.attr('src') === 'img/player_run_left.gif'){
								// 跑动动作完成后，设置角色图片为静止状态的图片
								player.attr('src', 'img/player_right.gif');
							}else if(player.attr('src') === 'img/playerbig_left.gif' || player.attr('src') === 'img/playerbig_right.gif'){
								// 跑动动作完成后，设置角色图片为静止状态的图片
								player.attr('src', 'img/playerbig_right.gif');
							}
							isRunning = false;
						});

						isRunning = true;
						break;
					default:
						break;
				}
			}
		});
	});
</script>
</body>
</html>